<template>
    <div>
        <div style="border: 1px solid #ccc;">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
            <Editor style="height: 200px; overflow-y: hidden;" :defaultConfig="editorConfig" :mode="mode"
                @onCreated="onCreated" @onChange="onChange"/>
        </div>
    </div>
</template>
<script>
import config from "@/config";
import { getToken } from "../../libs/util";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
    name: 'rich-text',
    components: {
        Editor, Toolbar
    },
    props: {
        content: {
            type: String,
            default: ''
        },
    },
    // watch: {
    //     content() {
    //         this.editor.setHtml(this.content);
    //     }
    // },
    data() {
        return {
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: {},
            editorConfig: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    uploadImage: {
                        server: baseUrl + "/admin/file/uploadImage",
                        fieldName: "file",
                        headers: {
                            Authorization: getToken()
                        },
                        // 单个文件上传成功之后
                        onSuccess(file, res) {
                        },
                    },
                    uploadVideo: {  //上传视频配置
                        server: baseUrl + "/admin/file/uploadImage",
                        fieldName: "file",
                        headers: {
                            Authorization: getToken()
                        }
                    },

                }
            },
            mode: 'simple',//'default', // or 'simple',
            editorData: "",
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        onChange(e){
            // console.log(e.getHtml());
            this.$emit('getEditorContent', e.getHtml())
        },
        setContent(value){
            this.editor.setHtml(value);
        },
    },
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>